<div class="layui-fluid">   
    <div class="layui-card">
     
        <div class="layui-card-body">
            <div class="layui-card-box">
                <div class="layui-btn-group">
                    <a class="layui-btn" id="top-product-add"><i class="layui-icon layui-icon-add-circle"></i> 添加</a>
                    <a class="layui-btn" id="top-product-adds"><i class="layui-icon layui-icon-add-circle"></i> 批量</a>
                    <a class="layui-btn" id="top-product-del"><i class="layui-icon layui-icon-delete"></i> 删除</a>
                    <a class="layui-btn" id="top-product-sz" data="1"><i class="layui-icon">&#xe624;</i>展开</a>
                  
                </div>
            </div>
            <table lay-filter="product" id="product"></table>
        </div>
    </div>
</div>
<!--JS部分-->
<script type="text/javascript">
layui.use(['trTable','xmSelect','iconPicker','buildItems'],function(){
    var map_root = layui.cache.maps;
    var app_root = map_root + 'zhusu.reportforms/';
    var layer = layui.layer,form = layui.form,admin = layui.admin,treeTable = layui.trTable;
 
    /* 渲染表格 https://gitee.com/whvse/treetable-lay  https://gitee.com/whvse/treetable-lay/wikis/pages */
    var menusTb = treeTable.render({
        elem: '#product',
        checkdd: false,
      
        url: app_root+"product?do=json",
        toolbar: [
            '<p><span class="layui-inline"><input class="layui-input" id="edtSearch" placeholder="输入关键字" style="width:140px;margin-right:5px;height:30px;"></span>',
            '<button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary layui-inline"><i class="layui-icon"></i>搜索</button>',
            '<button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary layui-inline"><i class="layui-icon"></i>清除搜索</button></p>'
            ].join(''),
        tree: {
            iconIndex: 2,
            isPidData: true,
            idName: 'id',
            pidName: 'parentid',
            arrowType: 'arrow2',
            getIcon: 'v-tree-icon-style2'
        },
        cols: [[
            {type:'checkbox',fixed:'left'},
            {field:'id',width:50,unresize:true,align:'center',title:'ID'},
            {field:'name',minWidth:150,edit:'text',title:'产品名称'},
            {field:'unitprice',minWidth:150,edit:'text',title:'单价'},
            {field:'modulus',minWidth:150,edit:'text',title:'模数'},
            {fixed:'right',width:150,align:'center',toolbar:'<div><a class="layui-btn layui-btn-xs" lay-event="add">添加</a><a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">编辑</a><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a></div>',title:'操作'}
        ]]
    });/**/
    /*顶部选项卡监听*/
    layui.element.on('tab(menus_top_tab)',function(){
        catid = this.getAttribute("catid");
        menusTb.reload({where:{catid:catid}});
    });/**/
    /*搜索、清除搜索*/
    $('#btnSearch').click(function(){
        var keywords = $('#edtSearch').val();
        if(keywords){
            menusTb.clearFilter();
            menusTb.filterData(keywords);
        }else{
            menusTb.clearFilter();
        }
    });
    $('#btnClearSearch').click(function(){menusTb.clearFilter();});/**/
    /*展开或折叠*/
    $('#top-product-sz').click(function(){
        var ob = $(this),i,t;
        if(ob.attr('data')==1){
            menusTb.expandAll();
            i=0;t='<i class="layui-icon">&#xe67e;</i>折叠';
        }else{
            menusTb.foldAll();
            i=1;t='<i class="layui-icon">&#xe624;</i>展开';
        }
        ob.attr('data',i).html(t);
    });/**/


    /*快编监听*/
    treeTable.on('edit(product)',function(obj){
        admin.req(app_root+"product_edit?do=up",{id:obj.data.id,av:obj.value,af:obj.field},function(res){
            layer.msg(res.msg,{shade:[0.4,'#000'],time:1000});
        },'post',{headersToken:true});
    });/**/
    /*顶部添加按钮*/
    $('#top-product-add').on('click',function(){addOpen();});
    /**/
    /*顶部批量按钮*/
    $('#top-product-adds').on('click',function(){addsOpen(0);});
    /**/
    /*顶部删除按钮*/
    $('#top-product-del').on('click', function(){
        var checkRows = menusTb.checkStatus();
        if(checkRows.length == 0){return layer.msg('请选择需删除的产品');}
        var ids = checkRows.map(function(d){return d.id;});
        del(ids);
    });/**/
    /*工具条监听*/
    treeTable.on('tool(product)', function(obj){
        var data = obj.data;
        if(obj.event == 'add'){
            addsOpen(data.id);
        }else if(obj.event == 'edit'){
            addOpen(data);
        }else if(obj.event == 'del'){
            del(data.id);
        }
    });/**/
    /*删除*/
    function del(ids){
        layer.confirm('确定要删除所选产品吗？', function(){
            admin.req(app_root+"product_del",{id:ids},function(res){
                layer.msg(res.msg,{shade:[0.4,'#000'],time:1500},function(){
                    if(res.code==1) menusTb.refresh();
                });
            },'post',{headersToken:true});
        });
    }/**/
    /*批量添加*/
    function addsOpen(id){
        admin.open({
            type: 1,
            bid: 'product_items',
            btn: ['确认添加', '取消'],
            area: ['460px', '350px'],
            title: '批量添加产品',
            success: function(l,index){
                l.children('.layui-layer-content').css('overflow', 'visible');
                layui.buildItems.build({
                    bid: 'product_items',
                    data: [
                        {name:"pid",title:"上级ID",type:"number",value:id,verify:'required',placeholder:"请输入上级ID，0：为顶级",must:true},
                        {name:"titles",title:"产品名称",type:"textarea",value:'',verify:'required',style:"height:160px",placeholder:"可批量添加，一行一个，点回车换行",must:true}
                    ]
                });
                form.on('submit(product_items)',function(data){
                    //console.log(data);
                    var btn = $(this);
                    if (btn.attr('stop')){return false}else{btn.attr('stop',1)}
                    data.field.id = id;
                    admin.req(app_root+"product_adds",data.field,function(res){
                        layer.msg(res.msg,{shade:[0.4,'#000'],time:1500},function(){
                            if(res.code==1){
                                layer.close(index);
                                menusTb.refresh();
                            }
                            btn.removeAttr('stop');
                        });
                    },'post',{headersToken:true});
                    return false;
                });
            }
        });
    }/**/
    /*添加、编辑弹出窗*/
    function addOpen(Dt){
        admin.open({
            type: 1,
            bid: 'menus_items',
            btn: ['保存', '取消'],
            area: ['660px', '450px'],
            title: (Dt ? '编辑' : '添加') + '产品',
            success: function(l,index){
                layui.buildItems.build({
                    bid: 'menus_items',
                    data: [
                        {name:"id",type:"hidden"},
                        {name:"parentid",title:"上级产品",type:"html",html:'<div id="public-list-tree" class="v-xmselect-tree"></div>',must:true},
                        {name:"name",title:"产品名称",type:"text",value:'',verify:'required',placeholder:"请输入产品名称",must:true},
                        {name:"unitprice",title:"单价",type:"text",value:'',placeholder:"请输入单价"},
                        {name:"modulus",title:"模数",type:"text",value:'',placeholder:"请输入模数"},
                        {name:"listorder",title:"排序编号",type:"number",value:'100',verify:'required',placeholder:"请输入排序数字"},
                        
                    ]
                });
                form.val('menus_items_form',Dt);
        

                /*渲染下拉树 https://maplemei.gitee.io/xm-select/#/component/options*/
                var data = JSON.parse(JSON.stringify(menusTb.options.data));
                if(Dt) Exitem(data,Dt.id,true);
                layui.xmSelect.render({
                    el: '#public-list-tree',
                    name: 'parentid',
                    tips: '顶级产品',
                    height: '430px',
                    data: data,
                    filterable: true,
                    radio: true,
                    clickClose: true,
                    model: {label:{type:'text'}},
                    initValue: [Dt ? Dt.parentid : ''],
                    prop: {name:'name',value:'id',disabled:'disabled'},
                    tree: {show:true,indent:25,strict:false,expandedKeys:true}
                });
                form.on('submit(menus_items)',function(data){
                   console.log(data);
                    var btn = $(this);
                    if (btn.attr('stop')){return false}else{btn.attr('stop',1)}
                    var field = data.field;
                   var post_url = field.id ? app_root+'product_edit' : app_root+'product_add';
                   
                    admin.req(post_url,field,function(res){
                        layer.msg(res.msg,{shade:[0.4,'#000'],time:1500},function(){
                            if(res.code==1){
                                layer.close(index);
                                menusTb.refresh();
                            }
                            btn.removeAttr('stop');
                        });
                    },'post',{headersToken:true});  
                    return false;
                   
                });
               
            }
        });
    }/**/
    /*本身和子类不可选为上级*/
    function Exitem(data, id, flag){
        for(var a in data){
            if(flag){
                if(data[a].id == id){
                    data[a].disabled = true;
                    if(data[a].hasOwnProperty('children')) Exitem(data[a].children, id, false);
                }else{
                    if(data[a].hasOwnProperty('children')) Exitem(data[a].children, id, flag);
                }
            }else{
                data[a].disabled = true;
                if(data[a].hasOwnProperty('children')) Exitem(data[a].children, id, false);
            }
        }
    }/**/
});
</script>